<template>
	<view class="product-list">
		<view v-for="(item, index) in productList" class="product-item" :key="index" @click="navToDetailPage(item)">
			<view class="image-wrapper">
				<image :src="item.pic" mode="aspectFill"></image>
			</view>
			<text class="title clamp">{{item.title}}</text>
			<text class="title2">{{item.subTitle}}</text>
			<view class="price-box">
				<text class="price">￥{{item.price}}</text>
				<text>已售 {{item.sale}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name:"product-item-column",
	props: {
		productList: {
			type: Array,
			default () {
				return []
			}
		},
	},
	data() {
		return {
			
		};
	},
	methods: {
		//详情
		navToDetailPage(item) {
			uni.navigateTo({
				url: `/pages/product/product?sku=${item.sku}`
			})
		},
	}
}
</script>

<style lang="scss">

.product-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 30upx;
	background: #fff;
}
	
.product-item {
	display: flex;
	flex-direction: column;
	width: 48%;
	padding: 10upx;
	
	&:nth-child(2n+1) {
		margin-right: 4%;
	}
}

.image-wrapper {
	width: 100%;
	height: 330upx;
	border-radius: 20upx;
	overflow: hidden;

	image {
		width: 100%;
		height: 100%;
		opacity: 1;
	}
}

.title {
	font-size: $uni-font-size-lg;
	color: $uni-text-color-dark;
	line-height: 80upx;
}

.title2 {
	font-size: $uni-font-size-sm;
	color: $uni-text-color-light;
	line-height: 40upx;
	height: 80upx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.price-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10upx 0upx;
	font-size: 24upx;
	color: $uni-text-color-light;
	
	.price {
		font-size: $uni-font-size-lg;
		color: $uni-text-color-red;
	}
}
</style>
